App.require(function () {
    App.defineWidgetBehavior("fill", {
        render: function (ctx) {
            var target = this.target;
            var points = target.points, len = points.length;
            ctx.fillStyle = "orange";
            ctx.beginPath();
            ctx.arc(points[len - 2], 5, 5, 0, Math.PI * 2, false);
            ctx.fill();
        },
        initialize: function () {
            this.attachDiyEvent("click", this.clickHandler);
        },
        clickHandler: function (ev) {
            var pos = this.target._inverse(ev), points = this.target.points, len = points.length;
            var x = points[len - 2], y = 5;
            var deltaX = pos.x - x, deltaY = pos.y - y;
            if (deltaX * deltaX + deltaY * deltaY < 25) {
                var canvas = this.target.getScene().canvas;
                var event = document.createEvent("CustomEvent");
                event.initCustomEvent("edit", true, true,  {
                    widget: this.target,
                    data: this.target.createEditForm()
                });
                canvas.dispatchEvent(event);
            }
        },
        toForm: {
            stroke: {
                element: function () {
                    return {
                        type: "fillelement"
                    }
                },
                initValue: function () {
                    return this.stroke;
                },
                callback: function (key, value, element) {
                    if (typeof value !== "string") value = App.ResourceManager.set(value);
                    this.updatePropertyExcept(key, value, element);
                },
            }
        }
    });
})